<template>
  <div>
      <div class="hearder">
          <span><b>搜索用户数</b></span>
          <svg t="1637478175000" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2179" width="26" height="26"><path d="M536 480v192a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16V480a16 16 0 0 1 16-16h16a16 16 0 0 1 16 16z m-32-128h16a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16z m8 448c159.056 0 288-128.944 288-288s-128.944-288-288-288-288 128.944-288 288 128.944 288 288 288z m0 48c-185.568 0-336-150.432-336-336s150.432-336 336-336 336 150.432 336 336-150.432 336-336 336z" p-id="2180" fill="#8a8a8a"></path>
      </svg>
      </div>

      <div class="main">
          <span class="main-title">76390</span>
          <span class="main-content">17.8
              <svg t="1653967353852" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2147" width="16" height="16" class="icon"><path data-v-7c31a34e="" d="M480 896V250.4L237.6 493.6 192 448l274.4-274.4L512 128l45.6 45.6L832 448l-45.6 45.6L544 250.4V896h-64z" p-id="2148" fill="#17abe3"></path></svg>
              <svg t="1653967663577" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3076" width="16" height="16" class="icon"><path data-v-7c31a34e="" d="M921.6 563.2c-9.6-9.6-25.6-9.6-35.2 0L544 896l0-822.4c0-12.8-9.6-22.4-25.6-22.4s-25.6 9.6-25.6 22.4L492.8 896l-342.4-339.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 22.4 0 32l384 377.6c6.4 6.4 12.8 6.4 19.2 6.4 0 0 0 0 0 0 3.2 0 3.2 0 6.4 0 0 0 0 0 3.2 0 3.2 0 6.4-3.2 9.6-6.4l380.8-371.2C931.2 588.8 931.2 572.8 921.6 563.2z" p-id="3077" fill="#d4237a"></path></svg>
          </span>
      </div>

      <!-- 图表 -->
      <div class="footer">
          <div class="charts" ref="charts"></div>
      </div>
      
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    name:'lineCharts',
    mounted(){
        //初始化echarts实例
        let lineCharts = echarts.init(this.$refs.charts);
        //配置数据
        lineCharts.setOption({
          xAxis: {
            //隐藏x轴
            show: false,
            type: "category",
          },
          yAxis: {
            //隐藏y轴
            show: false,
          },
          //系列
          series: [
            {
              type: "line",
              smooth: true,//平滑线条
              data: [10, 7, 33, 76, 55, 20, 29, 10, 44],
              //拐点的样式的设置
              itemStyle: {
                opacity: 0,
              },
              //线条的样式
              lineStyle: {
                color: "#f56c6c",
              },
              //填充颜色设置
              areaStyle: {
                color: {
                  type: "#f56c6c",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#f56c6c", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#fff", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
          ],
          //布局调试
          grid: {
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
          },
        });
    }
}
</script>

<style>
.hearder{
    margin-top: 10px;
    /* 子标签 垂直居中 */
    display: flex;
    align-items: center;
}
.hearder svg{
    margin-left: 10px;
}
.main{
    margin: 10px 0;
}
.main-title{
    margin-right: 20px;
}
.charts{
    width: 100%;
    height: 50px;
}
</style>